<!--先使用WebStorm格式化，
    压缩工具：https://c.runoob.com/front-end/47/
转义工具：https://www.bejson.com/
注意calc(函数减号-前后要加空格)-->
<!DOCTYPE html>
<html lang="en">

<head>
    <title>WiFi Connect Configuration</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0"/>
    <style>
        .ball-grid-pulse {
            width: 200px
        }

        canvas {
            display: block;
            width: 100%;
            height: 100%
        }

        .ball-grid-pulse > div:nth-child(1) {
            -webkit-animation-delay: -0.06s;
            animation-delay: -0.06s;
            -webkit-animation-duration: .72s;
            animation-duration: .72s
        }

        .ball-grid-pulse > div:nth-child(2) {
            -webkit-animation-delay: .25s;
            animation-delay: .25s;
            -webkit-animation-duration: 1.02s;
            animation-duration: 1.02s
        }

        .ball-grid-pulse > div:nth-child(3) {
            -webkit-animation-delay: -0.17s;
            animation-delay: -0.17s;
            -webkit-animation-duration: 1.28s;
            animation-duration: 1.28s
        }

        .ball-grid-pulse > div:nth-child(4) {
            -webkit-animation-delay: .48s;
            animation-delay: .48s;
            -webkit-animation-duration: 1.42s;
            animation-duration: 1.42s
        }

        .ball-grid-pulse > div:nth-child(5) {
            -webkit-animation-delay: .31s;
            animation-delay: .31s;
            -webkit-animation-duration: 1.45s;
            animation-duration: 1.45s
        }

        .ball-grid-pulse > div:nth-child(6) {
            -webkit-animation-delay: .03s;
            animation-delay: .03s;
            -webkit-animation-duration: 1.18s;
            animation-duration: 1.18s
        }

        .ball-grid-pulse > div:nth-child(7) {
            -webkit-animation-delay: .46s;
            animation-delay: .46s;
            -webkit-animation-duration: .87s;
            animation-duration: .87s
        }

        .ball-grid-pulse > div:nth-child(8) {
            -webkit-animation-delay: .78s;
            animation-delay: .78s;
            -webkit-animation-duration: 1.45s;
            animation-duration: 1.45s
        }

        .ball-grid-pulse > div:nth-child(9) {
            -webkit-animation-delay: .45s;
            animation-delay: .45s;
            -webkit-animation-duration: 1.06s;
            animation-duration: 1.06s
        }

        .ball-grid-pulse > div {
            background-color: #ebadbe;
            width: 50px;
            height: 50px;
            border-radius: 100%;
            margin: 2px;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
            display: inline-block;
            -webkit-animation-name: ball-grid-pulse;
            animation-name: ball-grid-pulse;
            -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
            -webkit-animation-delay: 0;
            animation-delay: 0
        }

        @-webkit-keyframes ball-grid-pulse {
            0% {
                -webkit-transform: scale(1);
                transform: scale(1)
            }

            50% {
                -webkit-transform: scale(0.5);
                transform: scale(0.5);
                opacity: .7
            }

            100% {
                -webkit-transform: scale(1);
                transform: scale(1);
                opacity: 1
            }
        }

        @keyframes ball-grid-pulse {
            0% {
                -webkit-transform: scale(1);
                transform: scale(1)
            }

            50% {
                -webkit-transform: scale(0.5);
                transform: scale(0.5);
                opacity: .7
            }

            100% {
                -webkit-transform: scale(1);
                transform: scale(1);
                opacity: 1
            }
        }


        body {
            color: #434343;
            font-family: "MI LANTING Light", "Microsoft YaHei UI Light", "Microsoft YaHei", Tahoma, "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
            font-size: 10px;
            line-height: 1.42857142857143;
            padding: 0px;
            margin: 0px
        }

        a {
            text-decoration: none
        }

        input:focus,
        button:focus {
            outline: 0
        }

        #container {
            margin: 0 auto;
            max-width: 350px
        }

        #infocontainer {
            margin: 0 auto;
            max-width: 350px
        }

        #scan-btn {
            display: block;
            background: #d0d3d4;
            border: 0;
            border-radius: 25px;
            cursor: pointer;
            font-size: 18px;
            height: 45px;
            line-height: 45px;
            margin: 18px auto;
            padding: 0 30px
        }

        #tableInfo {
            margin-top: 20px;
            box-sizing: border-box;
            border-radius: 18px;
            width: 100%;
            background: #f4f6f6
        }

        #ssid-list {
            margin-top: 20px;
            box-sizing: border-box;
            border-radius: 18px;
            width: 100%;
            background: #f4f6f6
        }

        #ssid-list > li {
            line-height: 32px;
            position: relative;
            cursor: pointer;
            display: block;
            padding: 8px 15px
        }

        #ssid-list > li:first-child {
            border-top: 0;
            border-top-left-radius: 20px;
            border-top-right-radius: 20px
        }

        #ssid-list > li:last-child {
            border-bottom-left-radius: 20px;
            border-bottom-right-radius: 20px
        }

        #ssid-list > li:hover {
            background: #d0d3d4
        }

        .wifi-logo {
            position: absolute;
            top: 14px;
            height: 18px
        }

        .encrytype {
            color: #999;
            display: inline-block;
            z-index: 1;
            position: absolute;
            right: 16px
        }

        .ssid_name {
            margin-left: 34px;
            font-size: 16px
        }

        #secondary-menu {
            display: none;
            width: 300px;
            height: 180px;
            position: fixed;
            top: 180px;
            left: calc(50% - 150px);
            background: #f4f6f6;
            border-radius: 25px;
            text-align: center
        }

        #secondary-menu-ssid {
            margin-top: 12px;
            font-size: 20px;
            display: inline-block
        }

        #key-icon {
            position: absolute;
            left: 30px;
            top: 75px;
            width: 25px
        }

        #wifi-pass {
            margin-top: 25px;
            width: 260px;
            height: 40px;
            font-size: 18px;
            border: 0;
            border-radius: 25px;
            text-align: center
        }

        #wifi-pass-sub {
            width: 100px;
            height: 40px;
            border: 0;
            border-radius: 25px;
            background: #d0d3d4;
            line-height: 18px;
            margin: 18px 5px 0 5px;
            font-size: 18px;
            opacity: .6
        }

        #secondary-menu-back {
            cursor: pointer;
            position: absolute;
            top: 18px;
            left: 18px;
            font-family: Consolas;
            font-size: 16px;
            width: 13px;
            height: 13px;
            line-height: 30px;
            border-top: 3px solid #a1a1a1;
            border-left: 3px solid #a1a1a1;
            transform: rotate(-45deg)
        }

        #dinfos {
            border-collapse: collapse;
            width: 100%;
        }

        #dinfos td,
        #dinfos th {
            font-size: 16px;
            border: 1px solid #ddd;
            padding: 8px;
        }

        #dinfos tr:nth-child(even) {
            background-color: #f2f2f2;
        }

        #dinfos tr:hover {
            background-color: #ddd;
        }

        #dinfos th {
            padding-top: 12px;
            padding-bottom: 12px;
            text-align: center;
            background-color: #505050;
            color: white;
        }

        #status {
            display: none;
            margin-top: 50px;
            font-size: 28px;
            text-align: center
        }

        #header {
            position: absolute;
            width: 100%;
            height: 32px;
            background: rgb(155, 222, 255);
            clear: both;
        }
    </style>
</head>

<body>
<canvas id="canvas" style="position:absolute;z-index:-2;"></canvas>

<div id="header">
    <p style="text-align: center;">BY D&B Group 7 Tele. team</p>
</div>
<p style="color:#999;font-size:1px;text-align: center;visibility:hidden;">test</p>

<h1 style="text-align:center;font-size:40px;">WiFi Connect Configuration</h1>
<div id="infocontainer">
    <p style="color:#999;font-size:24px;text-align: center;">Device Info: </p>
    <div id="tableInfo"></div>
</div>
<div id="container">
    <button onclick="scan()" id="scan-btn">Scan WiFi</button>
    <div id="ssid-list"></div>
</div>
<div id="secondary-menu">
    <div id="secondary-menu-back" onclick="back()"></div>
    <div id="secondary-menu-ssid"></div>
    <img id="key-icon"
         src=""/>
    <input type="password" id="wifi-pass" oninput="pass_change()"/>
    <button id="wifi-pass-sub" onclick="connect()" disabled="">Connect</button>
</div>
<div id="status">
    <div class="loader-inner ball-grid-pulse" style="margin: 0 auto;">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>

<script>
    class Circle {
        constructor(x, y) {
            this.x = x;
            this.y = y;
            this.r = Math.random() * 10;
            this._mx = Math.random();
            this._my = Math.random();
        }

        drawCircle(ctx) {
            ctx.beginPath();

            ctx.arc(this.x, this.y, this.r, 0, 360);
            ctx.closePath();
            ctx.fillStyle = "rgba(204, 204, 204, 0.3)";
            ctx.fill();
        }

        drawLine(ctx, _circle) {
            let dx = this.x - _circle.x;
            let dy = this.y - _circle.y;
            let d = Math.sqrt(dx * dx + dy * dy);
            if (d < 150) {
                ctx.beginPath();

                ctx.moveTo(this.x, this.y);
                ctx.lineTo(_circle.x, _circle.y);
                ctx.closePath();
                ctx.strokeStyle = "rgba(204, 204, 204, 0.3)";
                ctx.stroke();
            }
        }

        move(w, h) {
            this._mx = (this.x < w && this.x > 0) ? this._mx : (-this._mx);
            this._my = (this.y < h && this.y > 0) ? this._my : (-this._my);
            this.x += this._mx / 2;
            this.y += this._my / 2;
        }
    }

    class currentCirle extends Circle {
        constructor(x, y) {
            super(x, y);
        }

        drawCircle(ctx) {
            ctx.beginPath();


            this.r = 8;
            ctx.arc(this.x, this.y, this.r, 0, 360);
            ctx.closePath();

            ctx.fillStyle = "rgba(255, 77, 54, 0.6)";
            ctx.fill();

        }
    }

    window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;

    let canvas = document.getElementById("canvas");
    let ctx = canvas.getContext("2d");
    let w = canvas.width = canvas.offsetWidth;
    let h = canvas.height = canvas.offsetHeight;
    let circles = [];
    let current_circle = new currentCirle(0, 0);

    let draw = function () {
        ctx.clearRect(0, 0, w, h);
        for (let i = 0; i < circles.length; i++) {
            circles[i].move(w, h);
            circles[i].drawCircle(ctx);
            for (j = i + 1; j < circles.length; j++) {
                circles[i].drawLine(ctx, circles[j]);
            }
        }
        if (current_circle.x) {
            current_circle.drawCircle(ctx);
            for (var k = 1; k < circles.length; k++) {
                current_circle.drawLine(ctx, circles[k]);
            }
        }
        requestAnimationFrame(draw);
    };

    let init = function (num) {
        for (var i = 0; i < num; i++) {
            circles.push(new Circle(Math.random() * w, Math.random() * h));
        }
        draw();
    };
    window.addEventListener("load", init(60));
    window.onmousemove = function (e) {
        e = e || window.event;
        current_circle.x = e.clientX;
        current_circle.y = e.clientY;
    };
    window.onmouseout = function () {
        current_circle.x = null;
        current_circle.y = null;

    };

    function getDevices() {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                result = JSON.parse(xmlhttp.responseText);
                var tableInfos = document.getElementById("tableInfo");
                var code = "<table style=\"width:90%;\" align=\"center\" id=\"dinfos\">";
                code += "<TR><TH>Name</TH><TH>Device ID</TH></TR>";
                for (var i = 0; i < result.length; i++) {

                    code += "<TR><TD align=\"center\">" + result[i].dName + "</TD><TD align=\"center\">" + result[i].dId + "</TD></TR>";
                }
                tableInfos.innerHTML = code + "</table>";
            }
        };
        xmlhttp.open("GET", "/getdevices", true);
        xmlhttp.send();
    };
    window.addEventListener("load", getDevices());

    function $(id) {
        return document.getElementById(id);
    }

    function scan() {
        $("scan-btn").setAttribute("disabled", "disabled");
        $("scan-btn").style.cursor = "default";
        $("scan-btn").style.opacity = "0.6";
        $("ssid-list").innerHTML = "";
        $("ssid-list").style.display = "none";
        $("status").style.display = "block";
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                $("scan-btn").style.cursor = "pointer";
                $("scan-btn").style.opacity = "1";
                $("ssid-list").style.display = "block";
                $("status").style.display = "none";
                res_json = JSON.parse(xmlhttp.responseText);
                var i, j, max;
                for (i = 0; i < res_json.req.length; i++) {
                    max = 0;
                    for (j = 0; j < res_json.req.length; j++) {
                        if (res_json.req[max].rssi < res_json.req[j].rssi) {
                            max = j;
                        }
                    }
                    var para = document.createElement("li");
                    para.id = "ssid" + i;
                    para.setAttribute("onclick", "ssid_select('" + para.id + "')");
                    if (res_json.req[max].rssi >= -45) {
                        para.innerHTML += "<img class='wifi-logo' src=''>";
                    } else {
                        if (res_json.req[max].rssi >= -60) {
                            para.innerHTML += "<img class='wifi-logo' src=''>";
                        } else {
                            if (res_json.req[max].rssi >= -75) {
                                para.innerHTML += "<img class='wifi-logo' src=''>";
                            } else {
                                para.innerHTML += "<img class='wifi-logo' src=''>";
                            }
                        }
                    }
                    para.innerHTML += "<span class='encrytype'>" + res_json.req[max].encryptionType + "</span>" + "<span id='ssid_name" + i + "' class='ssid_name'>" + res_json.req[max].ssid + "</span>";
                    $("ssid-list").appendChild(para);
                    res_json.req[max].rssi = -999;
                }
                $("scan-btn").removeAttribute("disabled");
            }
        };
        xmlhttp.open("GET", "/wifiscan", true);
        xmlhttp.send();
    }

    var ssid_name;

    function ssid_select(ssid_num) {
        ssid_name = $(ssid_num).children[2].innerHTML;
        $("container").style.display = "none";
        $("infocontainer").style.display = "none";
        if ($(ssid_num).children[1].innerHTML == "Open") {
            connect();
        } else {
            $("wifi-pass-sub").setAttribute("disabled", "disabled");
            $("secondary-menu-ssid").innerHTML = ssid_name;
            $("secondary-menu").style.display = "block";
            if ($("secondary-menu-ssid").offsetWidth > 150) {
                var str = $("secondary-menu-ssid").innerHTML;
                $("secondary-menu-ssid").innerHTML = str.substr(0, str.length - 4) + "...";
            }
            $("wifi-pass").focus();
        }
    }

    function back() {
        $("secondary-menu").style.display = "none";
        $("container").style.display = "block";
        $("infocontainer").style.display = "block";
        $("wifi-pass-sub").style.cursor = "default";
        $("wifi-pass-sub").style.opacity = "0.6";
        $("wifi-pass").value = "";
    }

    function pass_change() {
        if ($("wifi-pass").value.length >= 8) {
            $("wifi-pass-sub").style.cursor = "pointer";
            $("wifi-pass-sub").style.opacity = "1";
            $("wifi-pass-sub").removeAttribute("disabled");
        } else {
            $("wifi-pass-sub").style.cursor = "default";
            $("wifi-pass-sub").style.opacity = "0.6";
            $("wifi-pass-sub").setAttribute("disabled", "disabled");
        }
    }

    function connect() {
        $("secondary-menu").style.display = "none";
        $("status").style.display = "block";
        var xmlhttp = new XMLHttpRequest();
        var requestString = "./wifisave?ssid=" + ssid_name + "&password=" + $("wifi-pass").value;
        xmlhttp.open("GET", requestString, true);
        xmlhttp.send();
        $("wifi-pass-sub").style.cursor = "default";
        $("wifi-pass-sub").style.opacity = "0.6";
        $("wifi-pass").value = "";
        $("infocontainer").style.display = "block";
        $("status").innerHTML = "<p style=\"color:#999;text-align: center;\">Configuration Saved<br />Trying to connect device to our server.<br />Check device status on the LCD screen</p>";
    };
    document.onkeydown = function (event) {
        var e = event || window.event;
        if (e && e.keyCode == 13 && $("wifi-pass").value.length >= 8) {
            connect();
        }
    };

</script>
</body>

</html>